<template>
	<div>
		<div class="test">{{ a }}</div>
		<button @click="add">+1</button>
	</div>
</template>
<script>
export default {
	data() {
		return {
			a: 123,
		};
	},
	methods: {
		// 数据更新前
		beforeDataUpdate() {
			console.log('数据更新前', this.a);
		},
		// 数据更新后
		dataUpdated() {
			console.log('数据更新后', this.a);
		},
		add() {
			this.beforeDataUpdate();
			this.a++;
			this.dataUpdated();
		},
        onkeyup (){
            console.log('aaa');
        }
	},
	// 创建前
	beforeCreate() {
		console.log('创建前', this.a);
	},
	// 创建后 实例加载后 (最常用)
	created() {
		console.log('创建后', this.a);
        window.addEventListener('keyup', onkeyup);
	},
	// 挂载前
	beforeMount() {
		console.log('挂载前', document.querySelector('.test'));
	},
	// 挂载后 DOM加载后 （常用）
	mounted() {
		console.log('挂载后', document.querySelector('.test'));
	},
	// DOM 更新前
	beforeUpdate() {
		console.log('更新前', document.querySelector('.test').innerText);
	},
	// DOM 更新后
	updated() {
		console.log('更新后', document.querySelector('.test').innerText);
	},
    // 实例销毁前
	beforeDestroy() {
		console.log('实例销毁前');
        window.removeEventListener('keyup', onkeyup);
    },
    // 实例销毁后
	destroyed() {
		console.log('实例销毁后');
	},
};
</script>

<style scoped>
</style>